<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src="../bower_components/babel/browser.js"></script>
    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <script src="../bower_components/react/react.development.js"></script>
    <script src="../bower_components/react/react-dom.development.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class Fooler extends React.Component {
            render() {
                return (
                    <div>
                        <button onClick={this._handleClick}>Fooler</button>
                    </div>
                )
            }
            _handleClick(e) {
                alert("这个结尾");
            }
        }
        class ExampleDom extends React.Component {
            constructor(){
                super();
                this._handleClick = this._handleClick.bind(this);
                this.state = {
                    isVisable: true,
                    messageContext: "你猜猜，点击的次数：",
                    clickCount: 0
                };
            }
            render() {
                var FoolerList = [];
                for (var i=0;i<10;i++) {
                    FoolerList.push(<Fooler key={'fooler'+i}/>);
                }
                var style = {
                    display: this.state.isVisable?'block':'none'
                };
                return (
                    <div>
                        <button onClick={this._handleClick} style={style}>{this.state.messageContext}{this.state.clickCount}</button>
                        <br/>
                        <span>引用</span>
                        <Fooler/>
                        <span>列表引用</span>
                        {FoolerList}
                    </div>
                )
            }
            _handleClick(e) {
                // alert(this.state.messageContext);
                var oldClickCount = this.state.clickCount+1;
                this.setState({
                    clickCount: oldClickCount
                })
            }
        }
        var selectDom = ReactDOM.render(
            <ExampleDom/>,
            // exampleDom,
            document.getElementById('app')
        );
        selectDom.setState({isVisable: true});
    </script>
</body>
</html>